<template>
  <p v-if="index != 0">或</p>
  <div class="condition-item">
    <div v-if="total > 1" class="condition-group-header">
      <span>条件组{{ index + 1 }}</span>
      <el-button type="danger" @click="removeGroup" text circle>
        <i class="icon iconfont">&#xe718;</i>
      </el-button>
    </div>
    <ConditionItemForm
      v-for="(obj, i) in arr"
      :key="i"
      :obj="obj"
      :index="i"
      @remove="remove"
      @edit="edit"
    />
    <div class="condition-group-control">
      <el-button @click="add">
        <el-icon><Plus /></el-icon> 添加条件
      </el-button>
      <span class="notes">还有{{ optionNum - arr.length }}个条件可用</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import ConditionItemForm from './ConditionItemForm.vue'
const emits = defineEmits(['remove', 'addOption', 'edit'])
const props = defineProps({
  index: {
    type: Number,
    default: () => {
      return 0
    }
  },
  total: {
    type: Number,
    default: () => {
      return 1
    }
  },
  optionNum: {
    type: Number,
    default: () => {
      return 1
    }
  },
  arr: {
    type: Array as () => any[],
    default: () => {
      return []
    }
  }
})
const removeGroup = () => {
  emits('remove', props.index)
}
const add = () => {
  emits('addOption', props.arr, props.index)
}
const edit = (data: any, index: number) => {
  const arr = props.arr.map((el, i) => {
    if (i === index) {
      return data
    } else {
      return el
    }
  })
  emits('edit', arr, props.index)
}
const remove = () => {}
</script>
